<template>
  <div>
    <el-tabs type="border-card" id="message-tabs">
      <el-tab-pane label='全部 4'>


        <ul class="infinite-list" style="overflow: auto">
          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

            
<div class="item-right">
  <div>1小时前</div>
<div class="item-button"><el-button type="text" style="color:#999" class="item-bwyd">标为已读</el-button><el-button type="text" style="color:#999" class="item-delete">删除</el-button></div>
  </div>



          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
           客户王某某新建了订单
            <el-link href="" target="_blank" type="primary"
              >《钻石戒指》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="审批 1"> 
 <ul class="infinite-list" style="overflow: auto">
          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>

        </ul>

      </el-tab-pane>
      <el-tab-pane label="公告 11"> 
         <ul class="infinite-list" style="overflow: auto">
          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>

        </ul>
      </el-tab-pane>
      <el-tab-pane label="邮件">
        暂无数据
         </el-tab-pane>
      <el-tab-pane label="日程 23">

  <ul class="infinite-list" style="overflow: auto">
          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
        </ul>
         </el-tab-pane>
      <el-tab-pane label="秘书 11">
        
        <ul class="infinite-list" style="overflow: auto">
          <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
           <li class="infinite-list-item">
<el-button
              type="primary"
              icon="el-icon-document-checked"
              circle
              size="mini"
            ></el-button>
            李涛已经审核通过您的
            <el-link href="" target="_blank" type="primary"
              >《普通审批》</el-link
            >
            ，请及时查看 10月16日

          </li>
        </ul> 
        
         </el-tab-pane>
                  
      <el-tab-pane label="电话 11"></el-tab-pane>
      <el-tab-pane label="客户 11"></el-tab-pane>
    </el-tabs>
    <div style="height:40px;padding:5px 15px;">
<span>
      <el-switch
   v-model="showNotread"
  active-color="#409EFF"
  inactive-color="#e6e6e6">
</el-switch> 仅显示未读消息
</span>

<el-dropdown placement="top"  style="float:right">
  <span class="el-dropdown-link">
    <i class="el-icon-more"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item><i class="el-icon-check"></i>全部标为已读</el-dropdown-item>
    <el-dropdown-item><i class="el-icon-delete"></i>删除全部已读信息</el-dropdown-item>

  </el-dropdown-menu>
</el-dropdown>


    </div>

  </div>
</template>

<script>
module.exports = {
   methods: {

   },
   data(){
     return{
       showNotread:false,

     }

   },
   
};
</script>

<style scoped>
#message-tabs .el-tabs__content {
  padding: 15px;
  min-height: 550px;
}
.infinite-list-item{
  padding:5px;
}
.infinite-list-item .item-button{
  display: none;
  margin-top: 0;
}
.infinite-list-item:hover .item-button{
  display: inline;

}
.infinite-list-item:hover{
  background-color: #f7f8fa;
} 
.item-right{
  text-align: right;
  color:#999;
  float: right;
 
}
</style>